import React, { useState, useEffect } from 'react';
import { Card, Button, message } from 'antd';
import { menuAPI, authAPI } from '../utils/api';

const SimpleMenuPage = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('admin_token'));
  const [loginForm, setLoginForm] = useState({ email: '', password: '' });
  const [menuItems, setMenuItems] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    try {
      const response = await authAPI.login(loginForm);
      if (response.data && response.data.data && response.data.data.token) {
        const { token } = response.data.data;
        localStorage.setItem('admin_token', token);
        message.success('登录成功');
        setIsLoggedIn(true);
      } else {
        message.error('登录失败');
      }
    } catch (error) {
      message.error('登录时发生错误');
    }
  };

  useEffect(() => {
    const fetchMenuItems = async () => {
      if (!isLoggedIn) return;
      
      try {
        setLoading(true);
        const response = await menuAPI.getMenuItems();
        console.log('菜单API响应:', response);
        
        if (response.data && response.data.success && response.data.data && response.data.data.items) {
          setMenuItems(response.data.data.items);
        } else {
          setMenuItems([]);
        }
      } catch (error) {
        console.error('获取菜单数据失败:', error);
        message.error('获取菜单数据失败');
        setMenuItems([]);
      } finally {
        setLoading(false);
      }
    };
    
    fetchMenuItems();
  }, [isLoggedIn]);

  if (!isLoggedIn) {
    return (
      <div style={{ padding: '50px', textAlign: 'center' }}>
        <Card title="请先登录" style={{ maxWidth: '400px', margin: '0 auto' }}>
          <div style={{ marginBottom: '16px' }}>
            <input
              type="email"
              placeholder="邮箱"
              value={loginForm.email}
              onChange={(e) => setLoginForm({...loginForm, email: e.target.value})}
              style={{ width: '100%', padding: '8px', marginBottom: '8px' }}
            />
            <input
              type="password"
              placeholder="密码"
              value={loginForm.password}
              onChange={(e) => setLoginForm({...loginForm, password: e.target.value})}
              style={{ width: '100%', padding: '8px' }}
            />
          </div>
          <Button type="primary" onClick={handleLogin} style={{ width: '100%' }}>
            登录
          </Button>
        </Card>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px' }}>
      <Card title="菜单管理" loading={loading}>
        <p>菜单项数量: {menuItems.length}</p>
        {menuItems.length > 0 ? (
          <div>
            <h3>菜单列表:</h3>
            {menuItems.map((item, index) => (
              <div key={item.id || index} style={{ padding: '8px', border: '1px solid #f0f0f0', margin: '8px 0' }}>
                <strong>{item.name || '未知菜品'}</strong>
                {item.name_en && <span> ({item.name_en})</span>}
                {item.price && <span> - ¥{item.price}</span>}
              </div>
            ))}
          </div>
        ) : (
          <p>暂无菜单数据</p>
        )}
      </Card>
    </div>
  );
};

export default SimpleMenuPage;